import { useEffect, useRef } from "react";
import AntvXmind from "./antv";
import ResizeObserver from "resize-observer-polyfill";
import _ from "lodash";
function Antv() {
  useEffect(() => {
    const container = document.getElementById("container");
    const wrapper = document.getElementById("wrapper");
    const xmind = new AntvXmind(container);
    const callback = _.debounce(function (entries, observer) {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        xmind.graph.size.resize(width, height);
      }
    }, 200);

    let observer = new ResizeObserver(callback);
    observer.observe(wrapper);
    return () => {
      if (observer) {
        observer.disconnect();
        observer.takeRecords && observer.takeRecords();
        observer = null;
      }
    };
  }, []);
  // overflow: "hidden" 很关键
  return (
    <div
      style={{ width: "100%", height: "100%", overflow: "hidden" }}
      id="wrapper"
    >
      <div
        id="container"
        style={{ width: "100%", height: "100%", margin: 0 }}
      />
    </div>
  );
}

export default Antv;
